<template>
  <ul class="article">
    <li class="item" v-for="article in data" :key="article.articleId">
      <div class="title">{{article.title}}</div>
      <div class="info">
        <span>作者：{{article.author}}</span> | <span>创建时间：{{article.createTime}}</span>
      </div>
      <div v-html="article.content"></div>
    </li>
  </ul>
</template>

<script>
import { get } from "@/utils/request";
// 时间格式化函数。
function formatDate(millisecond, template) {
  var res = "";
  try {
    var date = new Date(millisecond);
    var opt = {
      "Y+": date.getFullYear().toString(), // 年
      "m+": (date.getMonth() + 1).toString(), // 月
      "d+": date.getDate().toString(), // 日
      "H+": date.getHours().toString(), // 时
      "M+": date.getMinutes().toString(), // 分
      "S+": date.getSeconds().toString(), // 秒
    };
    template = template || "YYYY-mm-dd";
    for (var k in opt) {
      var ret = new RegExp("(" + k + ")").exec(template);
      if (ret) {
        template = template.replace(
          ret[1],
          ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
        );
      }
    }
    res = template;
  } catch (error) {
    console.warn("ERROR formatDate", error);
  }
  return res;
}
export default {
  name: "article",
  components: {},
  data() {
    return {
      data: []
    };
  },
  async created() {
    // 获取文章数据。
    const res = await get('/getAllArticles')
    if (res.data.data && res.data.data.length > 0) {
      this.data = res.data.data.map(item => {
        return {
          ...item,
          createTime: formatDate(item.createTime, 'YYYY-mm-dd HH:MM:SS'),
        }
      }).filter(item => item.status)
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  list-style: none;
  width: 70%;
  margin: 0 auto;
  .item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
    .title {
      font-size: 30px;
      color: #7e7575;
      padding: 10px 0;
      font-weight: 600;
    }
    .info {
      padding: 5px 0;
    }
  }
}
</style>
